import React, { Component, lazy,Suspense } from 'react'
import {  Redirect, Route, Switch } from 'react-router-dom'
import  Loading  from '../components/loading'
// import Home from './index/MyHome'
// import Classify from './index/Classify'
// import Allgood from './index/Allgood'
// import Shopcar from './index/Shopcar'
// import Mine from './index/Mine'
// var Index = lazy(() => import('./views/index'))
// import '../styles/会员购/tabbar.css'
import '../styles/会员购/tabbar.scss'
import Tabbar from '../components/会员购/MyTabbar'

var Home = lazy(() => import('./index/MyHome'))
var Classify = lazy(() => import('./index/Classify'))
var Allgood = lazy(() => import('./index/Allgood'))
var Shopcar = lazy(() => import('./index/Shopcar'))
var Mine = lazy(() => import('./index/Mine'))



export default class index extends Component {
    state = {
        // arr: [
        //     { to: '/index/home', i: 'iconfont icon-shouye', title: '店铺' },
        //     { to: '/index/classify', i: 'iconfont icon-gongzuo', title: '分类' },
        //     { to: '/index/allgood', i: 'iconfont icon-tongjitu111', title: '全部商品' },
        //     { to: '/index/shopcar', i: 'iconfont icon-gouwuche', title: '购物车' },
        //     { to: '/index/mine', i: 'iconfont icon-wode', title: '个人中心' }
        // ]
    }
    render() {
        return (
            <div className='home'>
                {/* 二级路由 */}
                <Suspense fallback={<Loading></Loading>}>
                    <Switch>
                        <Route path='/index/home' component={Home}></Route>
                        <Route path='/index/classify' render={() => {
                            return <Classify></Classify>
                        }}></Route>
                        <Route path='/index/allgood' component={Allgood}></Route>
                        <Route path='/index/shopcar' component={Shopcar}></Route>
                        <Route path='/index/mine' component={Mine}></Route>
                        <Redirect exact from='/index' to='/index/home'></Redirect>
                    </Switch>
                </Suspense>


                <Tabbar ></Tabbar>
                {/* <div className="tabbar">
                    {
                        this.state.arr.map((v, i) => {
                            return (
                                <Link to={v.to} className="item" key={i}>
                                    <span className={v.i}></span>
                                    <span>{v.title}</span>
                                </Link>
                            )
                        })
                    }
                </div> */}


                {/* <Link to='/index/home'>店铺</Link>
                <Link to='/index/classify'>分类</Link>
                <Link to='/index/allgood'>所有商品</Link>
                <Link to='/index/shopcar'>购物车</Link>
                <Link to='/index/mine'>我的</Link> */}
            </div>
        )
    }
}
